<template>
	<!-- 购车商城 -->
	<view class="container" v-if="isloding">
		<view class="top">
			<view class="page">
				<tabControl :current="current" activeColor="#fff" :isEqually='false' :values="items" bgc="#fff" :fixed="true" :scrollFlag='true' @clickItem="onClickItem"></tabControl>
			</view>
		</view>
		<swiper class="swiper" style="height: 95%;" @change='scollSwiper' :current='current'>
			<swiper-item v-for="item in items" :key='item.ids'>
				<!-- 使用 scroll-view 来滚动内容区域 -->
				<scroll-view :scroll-y="true" style="height: 100%;" @scrolltolower="Load">
					<view class="box">
						<view class="item" v-for="card in info" :key="card.id">
							<image :src="card.cover_map" mode=""></image>
							<view class="right">
								<view class="weight">
									{{card.name}}
								</view>
								<view class="volume" v-for="dui in card.specs.parameter" :key="dui.id">
									{{dui.name}}:{{dui.value}}
								</view>
								<view class="btn" @tap="goDetails(card)">
									查看详情
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import tabControl from '@/components/shopping/tabControl-tag.vue';
	export default {
		components:{
			tabControl
		},
		data() {
			return {
				items: ['全部品牌', '东风', '红岩'],
				current: 0,
				show: 1,
				token:'',
				isloding:false,
				info:[],
				page:1,
				brand_id:'',//分类id
			};
		},
		onLoad(e) {
			this.token=e.token
			uni.showLoading({
				title: '加载中',
				mask: false
			});
			uni.request({    //获取分类
				url: this.webUrl+'/index/car/cate',
				method: 'GET',
				data: {},
				success: res => {
					if(res.data.code==0){
						this.items=res.data.data
					}else if(res.data.code==3){
						uni.showToast({
							title: res.data.msg,
							icon:'none',
							duration:2000
						});
					}else{
						uni.showToast({
							title: '网络错误',
							icon:'none',
							duration:2000
						});
					}
				},
				fail: () => {
					uni.showToast({
						title: '网络错误',
						icon:'none',
						duration:2000
					});
				},
				complete: () => {}
			});
			uni.request({     //获取列表
				url: this.webUrl+'/index/car/index',
				method: 'GET',
				header:{
					token:e.token
				},
				data: {},
				success: res => {
					uni.hideLoading()
					this.isloding=true
					if(res.data.code==0){
						this.info=res.data.data
						if(res.data.data.length==0){
							uni.showToast({
								title: '该分类下暂无车辆',
								icon:'none',
								duration:2000
							});
						}
					}else if(res.data.code==3){
						uni.showToast({
							title: res.data.msg,
							icon:'none',
							duration:2000
						});
					}else{
						uni.showToast({
							title: '网络错误',
							icon:'none',
							duration:2000
						});
					}
				},
				fail: () => {
					uni.showToast({
						title: '网络错误',
						icon:'none',
						duration:2000
					});
				},
				complete: () => {}
			});
		},
		methods:{
			Load(){
				//滚动触底加载更多
				uni.showLoading({
					title: '加载中',
					mask: false
				});
				this.page++
				uni.request({     //获取列表
					url: this.webUrl+'/index/car/index',
					method: 'GET',
					header:{
						token:this.token
					},
					data: {
						brand_id:this.brand_id,
						page:this.page
					},
					success: res => {
						uni.hideLoading()
						if(res.data.code==0){
							if(res.data.data.length==0){
								uni.showToast({
									title: '没有更多了',
									icon:'none',
									duration:2000
								});
							}else{
								let arr=res.data.data.map(item=>{
									this.info.push(item)
								})
							}
							// console.log(this.info)
						}else if(res.data.code==3){
							uni.showToast({
								title: res.data.msg,
								icon:'none',
								duration:2000
							});
						}else{
							uni.showToast({
								title: '网络错误',
								icon:'none',
								duration:2000
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '网络错误',
							icon:'none',
							duration:2000
						});
					},
					complete: () => {}
				});
			},
			goDetails(item){
				// console.log(item)
				uni.navigateTo({
					url: 'vehicleDetails/vehicleDetails?token='+this.token+'&id='+item.id,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			onClickItem(val) {
				this.page=1
				uni.showLoading({
					title: '加载中',
					mask: false
				});
				this.current = val.currentIndex
				let brand_id=this.items[val.currentIndex].id
				this.brand_id=brand_id
				uni.request({
					url: this.webUrl+'/index/car/index',
					method: 'GET',
					header:{
						token:this.token
					},
					data: {
						brand_id:brand_id
					},
					success: res => {
						uni.hideLoading()
						if(res.data.code==0){
							this.info=res.data.data
							if(res.data.data.length==0){
								uni.showToast({
									title: '该分类下暂无车辆',
									icon:'none',
									duration:2000
								});
							}
						}else if(res.data.code==3){
							uni.showToast({
								title: res.data.msg,
								icon:'none',
								duration:2000
							});
						}else{
							uni.showToast({
								title: '网络错误',
								icon:'none',
								duration:2000
							});
						}
					},
					fail: () => {
						uni.hideLoading()
						uni.showToast({
							title: '网络错误',
							icon:'none',
							duration:2000
						});
					},
					complete: () => {}
				});
			},
			scollSwiper(e) {
				this.current = e.target.current
				this.page=1
				uni.showLoading({
					title: '加载中',
					mask: false
				});
				let brand_id=this.items[e.target.current].id
				this.brand_id=brand_id
				uni.request({
					url: this.webUrl+'/index/car/index',
					method: 'GET',
					header:{
						token:this.token
					},
					data: {
						brand_id:brand_id
					},
					success: res => {
						uni.hideLoading()
						if(res.data.code==0){
							this.info=res.data.data
							if(res.data.data.length==0){
								uni.showToast({
									title: '该分类下暂无车辆',
									icon:'none',
									duration:2000
								});
							}
						}else if(res.data.code==3){
							uni.showToast({
								title: res.data.msg,
								icon:'none',
								duration:2000
							});
						}else{
							uni.showToast({
								title: '网络错误',
								icon:'none',
								duration:2000
							});
						}
					},
					fail: () => {
						uni.hideLoading()
						uni.showToast({
							title: '网络错误',
							icon:'none',
							duration:2000
						});
					},
					complete: () => {}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	uni-page-body{
		height: 100%;
	}
	page{
		height: 100%;
	}
	.container{
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		top: 0;
		background: #f2f2f2;
		.top{
			border-top: 2upx solid #E4E4E4;
		}
		.box{
			margin: 26upx auto 0;
			padding: 14upx 0 8upx;
			width:690upx;
			background:rgba(255,255,255,1);
			box-shadow:0px 3upx 15upx 1upx rgba(0, 0, 0, 0.11);
			border-radius:30upx;
			.item{
				position: relative;
				border-bottom: 2upx solid #E4E4E4;
				padding-top: 26upx;
				padding-bottom: 40upx;
				margin:0 40upx;
				display: flex;
				image{
					margin-top: 10upx;
					margin-left: -10upx;
					width: 238upx;
					height: 178upx;
				}
				.right{
					margin-top: 6upx;
					margin-left: 22upx;
					font-size: 22upx;
					line-height: 22upx;
					font-family:Microsoft YaHei;
					font-weight:400;
					color:rgba(52,52,52,1);
					.Larry{
						margin-top: 28upx;
					}
					.volume,.Specifications{
						margin-top: 12upx;
					}
					.btn{
						position: absolute;
						width:120upx;
						height:40upx;
						background:rgba(254,86,33,1);
						border-radius:20upx;
						text-align: center;
						line-height: 40upx;
						font-size:24upx;
						font-family:Microsoft YaHei;
						font-weight:400;
						color:rgba(255,254,254,1);
						top: 198upx;
						right: 0upx;
					}
				}
			}
			.item:last-child{
				border-bottom: none;
			}
		}
	}
</style>
